<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
            <el-row>
                <el-card shadow="always" style="margin-bottom: 10px;">
                    <el-radio-group v-model="indicatorType" size="mini">
                        <el-radio border key="today_call_time"  label="today_call_time">通话时长</el-radio>
                        <el-radio border key="today_talk_count"  label="today_talk_count">帮谈客户次数</el-radio>
                        <el-radio border key="today_distribute_count"  label="today_distribute_count">分配客户次数</el-radio>
                        <el-radio border key="today_distribute_total"  label="today_distribute_total">分配客户总量</el-radio>
                        <el-radio border key="today_addmust_count"  label="today_addmust_count">加入必跟进次数</el-radio>
                        <el-radio border key="today_addmust_total"  label="today_addmust_total">加入必跟进总量</el-radio>
                    </el-radio-group>
                </el-card>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="时间" prop="goalDate">
                        <el-date-picker v-model="goalDate" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="部门归属" prop="orgId">
                        <treeselect v-model="queryParams.orgId" :options="deptOptions" :show-count="true"
                            placeholder="请选择部门归属" :default-expand-level="4" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="顾问" prop="empId">
                        <el-select v-model="queryParams.empId" placeholder="顾问" clearable filterable>
                            <el-option v-for="user in sysUsersList" :key="user.userId" :label="user.nickName"
                                :value="user.userId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="userGoalList">            
            <el-table-column label="排名" type="index" align="center" >
                <template slot-scope="scope">
                <span>{{ getText(scope.$index) }}</span>
                </template>
            </el-table-column>            
            <el-table-column label="姓名" align="center" prop="user_name" />
            <el-table-column label="部门归属" align="center" prop="dept_name" />
            <el-table-column label="指标值" align="center" prop="indicator_val">
                <template slot-scope="scope">
                <span>{{ getIndicatorVal(scope.row) }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { userIndicatorRanking } from "@/api/crmsys/report/userGoal";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { childrenAlldeptTree } from "@/api/system/user";
import {
    getAllDeptandUsers
} from "@/api/crmsys/custinfo/custinfo";

export default {
    name: "UserIndicatorRanking",
    components: { Treeselect },
    data() {
        return {
            goalDate: null,
            // 周目标管理表格数据
            userGoalList: [],
            // 部门归属树选项
            deptOptions: [],
            sysUsersList: [],
            indicatorType:null,
            queryParams:{
                params: {
                }},
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getDeptTree();
        this.getDeptAndUsers();
        this.indicatorType='today_call_time';
        this.goalDate = [this.getNowFormatDate(), this.getNowFormatDate()]
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
        /** 查询周目标管理列表 */
        getList() {
            this.loading = true;
            this.queryParams.params.indicatorType = this.indicatorType;            
            this.addDateRange(this.queryParams, this.goalDate, "Time");

            userIndicatorRanking(this.queryParams).then(response => {
                this.userGoalList = response.data.list;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                empId: null,
                orgId: null,
                visit: null,
                signed: null,
                addFriend: null,
                introduce: null,
                introduceVisit: null,
                introduceSigned: null,
                smsfollow: null,
                callTime: null,
                goalDate: null,
                createTime: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            if(this.goalDate == null){
                
              this.$message.error("请选择要查询得时间");
                return;
            }
            this.loading=true;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        /** 获取部门归属和人员信息 */
        getDeptAndUsers() {
            getAllDeptandUsers().then((response) => {
                this.sysUsersList = response.data.sysUsersList;
            });
        },
        getText(index) {
            if(index == 0){
                return "第一名";
            }
            if(index == 1){
                return "第二名";
            }
            if(index == 2){
                return "第三名";
            }
            return index+1;
        },
        getIndicatorVal(row){
            if(this.indicatorType=="today_call_time"){
                return row.today_call_time;
            }
            if(this.indicatorType=="today_talk_count"){
                return row.today_talk_count;
            }
            if(this.indicatorType=="today_distribute_count"){
                return row.today_distribute_count;
            }
            if(this.indicatorType=="today_distribute_total"){
                return row.today_distribute_total;
            }
            if(this.indicatorType=="today_addmust_count"){
                return row.today_addmust_count;
            }
            if(this.indicatorType=="today_addmust_total"){
                return row.today_addmust_total;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
</style>